<script>
import { Vip } from '../../api'
export default {
  
  data() {
    return {
      total: "",
      list: [],
      limit: 3,
      currentPage: 1,
      val: "",
      hidden: false,
      vipVisible: false,
      writeVisible: false,
      //弹框
      centerDialogVisible: false,
      rechargeVisible: false,
      deleteVisible: false,
      radio: '1',
      formData: {
        id: "",
        userid: "",
        phone: "",
        sex: "",
        recharge: "",
        petname: ""
      },
      //获取会员数据
      tablelist: [],
      //搜索数据
      selectlist: [],
    }
  },
  created() {  //分页取
    this.currentPage = Number(localStorage.getItem("lastPage")) || 1;
    this.page()
    console.log(this.currentPage, "分页");
  },
  methods: {
    //分页
    async page() {
      let res = await Vip["page"](this.currentPage, this.limit)
      console.log(res, '分页信息');
      this.list = res.data
      // console.log(this.list,"list");
    },

    handleSizeChange(val) { //分页
      this.limit = val
      this.currentPage = 1
      console.log(val, "val!!");
      this.page()
    },
    handleCurrentChange(val) { //分页存
      this.currentPage = val
      this.page()
      localStorage.setItem("lastPage", this.currentPage)
    },

    //充值方法
    recharge(obj) {
      this.changeRecharge(obj)
      console.log(obj, "obj1");
      this.rechargeVisible = false
    },
    async changeRecharge(obj) {
      console.log(obj, "obj2");
      let res = await Vip["recharge"](obj)
    },
    //列表方法
    async getlist() {
      let res = await Vip['list']()
      this.tablelist = res.data
      
    },
    //添加方法
    async add() {
      this.centerDialogVisible = true
    },
    async add1(obj) {
      console.log(obj, "obj1");
      let res = await Vip['add'](this.formData)
      console.log(res);
      if (res.code == '200') {
        this.getlist()
      }
      this.centerDialogVisible = false
    },

    //删除方法
    async del() {
      let res = await Vip["delete"](this.formData.id);
      console.log(res, "delete的res!!!")
      this.deleteVisible = false;
      this.getlist()
    },
    open({ row }) {
      this.deleteVisible = true
      console.log(row.id);
      this.formData.id = row.id
    },
    //搜索方法
    async select(phone) {
      console.log(phone, "phone!!!!!");
      if (phone) {
        let res = await Vip["select"](phone);
        this.selectlist = res.data
        console.log(res.data);
        //只显示搜索到的信息
        this.list = res.data
        console.log(this.list,"搜单条");
      } else {
        this.getlist()
      }
    }

  },
  mounted() {
    //获取列表
    this.getlist()
    this.page()
  }
}
</script>

<template>
  <div>
    <div id="all">
      <div id="top">
        <!-- <el-input placeholder="请输入会员的id/用户名/手机号..." v-model="val" @keydown.enter="select(val)"> -->
        <input placeholder="请输入会员的手机号..." v-model="val" @keydown.enter="select(val)">
        <el-button id="topbut1" @click="select(val)">搜索
          <svg t="1709089060896" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="14856" width="10" height="8">
            <path
              d="M723.10784 723.10784a20.48 20.48 0 0 1 28.95872 0l262.43072 262.43072a20.48 20.48 0 0 1-28.96896 28.96896L723.10784 752.06656a20.48 20.48 0 0 1 0-28.95872z"
              p-id="14857"></path>
            <path d="M433.60256 433.60256m-430.08 0a430.08 430.08 0 1 0 860.16 0 430.08 430.08 0 1 0-860.16 0Z"
              p-id="14858"></path>
            <path d="M433.60256 433.60256m-215.04 0a215.04 215.04 0 1 0 430.08 0 215.04 215.04 0 1 0-430.08 0Z"
              fill="#EBBA50" p-id="14859"></path>
          </svg>
        </el-button>
        <el-button id="topbut2" type="text" @click="add">添加会员</el-button>
      </div>
      <div id="main">
        <el-table :data="list" stripe style="width: 100%">
          <el-table-column props="id" label="id" width="180">
            <template slot-scope="scope">
              <div>
                {{ scope.row.id }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userid" label="用户id" width="180">
            <template slot-scope="scope">
              <div>
                {{ scope.row.userid }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号">
            <template slot-scope="scope">
              <div>
                {{ scope.row.phone }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              <div>
                {{ scope.row.sex }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="recharge" label="充值金额">
            <template slot-scope="scope">
              <div>
                {{ scope.row.recharge }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="petname" label="宠物">
            <template slot-scope="scope">
              <div>
                {{ scope.row.petname }}
              </div>
            </template>
          </el-table-column>
          <!-- 三个按钮 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="success" @click="rechargeVisible = true">充值</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="warning" @click="centerDialogVisible = true">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="open(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 充值弹窗 -->
      <el-dialog title="充值" :visible.sync="rechargeVisible" v-model="rechargeVisible" width="40%">
        <p v-show="hidden" class="message">表单中的数据不能为空</p>
        <div class="eldiadiv">
          <span>请输入充值金额（元）</span>
          <el-input class="inp" type="text" v-model.trim="formData.recharge" />
        </div>

        <div style="margin-bottom: 20px; margin-right:210px ;">
          <span>请选择充值方式</span>
          <el-button style="margin-left: 30px;">
            <svg t="1708928793129" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5149" width="20" height="20">
              <path
                d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                fill="#28C445" p-id="5150"></path>
              <path
                d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                fill="#28C445" p-id="5151"></path>
            </svg>
            <p style="margin-top: 10px;">微信</p>
          </el-button>
        </div>

        <span class="dialog-footer">
          <el-button @click="rechargeVisible = false">取消</el-button>
          <el-button type="success" v-model.trim="formData.recharge" @click="recharge(formData)"> 确定 </el-button>
        </span>
      </el-dialog>

      <!-- 添加会员弹窗 -->
      <el-dialog :visible.sync="centerDialogVisible" width="50%" center show-close modal>

        <div class="name">
          <span class="wenzi">id</span>
          <el-input v-model.trim="formData.id" type="text"></el-input>
        </div>
        <div class="type">
          <span class="wenzi">用户id</span>
          <el-input v-model.trim="formData.userid" type="text"></el-input>
        </div>
        <div class="status">
          <span class="wenzi">手机号</span>
          <el-input v-model.trim="formData.phone" type="text"></el-input>
        </div>
        <div class="desc">
          <span class="wenzi">性别</span>
          <el-input type="textarea" v-model.trim="formData.sex"></el-input>
        </div>
        <div class="price">
          <span class="wenzi">充值金额</span>
          <el-input type="text" v-model.trim="formData.recharge"></el-input>
        </div>
        <div class="inventory">
          <span class="wenzi">宠物</span>
          <el-input type="text" v-model.trim="formData.petname"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add1(formData)">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 编辑会员弹窗 -->
      <el-dialog :visible.sync="centerDialogVisible" width="50%" center show-close modal>
        <div class="name">
          <span class="wenzi">id</span>
          <el-input v-model.trim="formData.id" type="text"></el-input>
        </div>
        <div class="type">
          <span class="wenzi">用户id</span>
          <el-input v-model.trim="formData.userid" type="text"></el-input>
        </div>
        <div class="status">
          <span class="wenzi">手机号</span>
          <el-input v-model.trim="formData.phone" type="text"></el-input>
        </div>
        <div class="sex">
          <span class="sexspan">性别(0:男,1:女)</span>
          <el-input type="text" v-model.trim="formData.sex"></el-input>
        </div>
        <div class="price">
          <span class="wenzi">充值金额</span>
          <el-input type="text" v-model.trim="formData.recharge"></el-input>
        </div>
        <div class="inventory">
          <span class="wenzi">宠物</span>
          <el-input type="text" v-model.trim="formData.petname"></el-input>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add1">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 删除弹窗 -->
    <el-dialog title="提示" :visible.sync="deleteVisible" width="30%">

      <div class="alertdiv">
        <div class="alertdivcon"><svg t="1708939223149" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="7248" width="20" height="20">
            <path
              d="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m0-85.333333c212.053333 0 384-171.946667 384-384S724.053333 128 512 128C299.925333 128 128 299.946667 128 512s171.925333 384 384 384z m0-562.922667A42.666667 42.666667 0 1 1 512 247.722667 42.666667 42.666667 0 0 1 512 333.077333z m0.576 438.549334a42.666667 42.666667 0 0 1-42.538667-39.488l-0.128-3.2v-298.666667a42.666667 42.666667 0 0 1 85.226667-3.178667l0.106667 3.2v298.666667a42.666667 42.666667 0 0 1-42.666667 42.666667z"
              fill="#FF8400" p-id="7249"></path>
          </svg></div>
        <el-alert title="此操作将删除该会员, 是否继续?" type="warning" :closable="false">
        </el-alert>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="danger" @click="del()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[3, 6, 9, 12, 15, 100]" :page-size="3" layout="total, sizes, prev, pager, next, jumper"
      :total="this.tablelist.length">
    </el-pagination>


  </div>
</template>

<style scoped>
#topbut1 {
  width: 40px;
  margin-left: 30px;
}

#topbut2 {
  margin-left: 20px;
  color: #606266;
}

.alertdiv {
  display: flex;
  width: 300px;
}

.alertdivcon {
  width: 20px;
  height: 20px;
  padding-top: 10px;
}

.inp {
  width: 300px;
}

#top {
  height: 50px;
  width: 100%;
  margin: 20px 10px;
  display: flex;
  background: #fff;
}

input {
  height: 30px;
  width: 300px;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 500px;
  border-radius: 18px;
  border: none;
  text-indent: 1.5em;
  background: #f4f2f2;
  outline: none;
}

#top>button {
  background: rgb(251, 215, 11);
  font-size: 10px;
  margin-top: 10px;
  margin-right: 20px;
  height: 30px;
  width: 60px;
  border: none;
  border-radius: 20px;
}

#main {
  background: #fff;
  width: 100%;
  height: 400px;
  margin: 20px 10px;
}

#all {
  background: #f4f2f2;
}
</style>